import { moneyFormat } from "@/utils/utils";
import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Table, Tabs, Image, Descriptions, Timeline, Upload } from "antd";
import { useState } from "react";
import process from '@/assets/imgs/process.png';
import { PlusOutlined, UploadOutlined } from "@ant-design/icons";
import { history } from 'umi';
import DealerDialog from "@/components/Common/DealerDialog";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [showTransfor,setShowTransfor] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [contactData,setContactData]=useState<any>([
    {id:'1',pIndex:1,dept:'第一临床应用科室',name:'张'},{id:'2',pIndex:2,dept:'第二临床应用科室',name:'李'}

  ]);
  const [proData,setProData]  =useState<any>([{id:'1',pIndex:1},{id:'2',pIndex:2}]);
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [editableContactKeys, setEditableContactRowKeys] = useState<React.Key[]>([1,2]);

  const [tabKey,setTabKey] = useState("1");
  const [showAccount,setShowAccount] = useState(false);
  const [showTicket,setShowTicket] = useState(false);
  const contactColumn:ProColumns[] = [
    {
      title: '临床科室',
   
      dataIndex: 'dept',
    },
    {
      title: '科室关键人',

      dataIndex: 'name',
    },
    {
      title:"操作",
      valueType: 'option',  
    },
  ]

  const columns_2:ProColumns[] = [
    {
      title: '产品名称',
      editable: false,
      dataIndex: 'n1',
      renderText:()=>'多孔机器人'
    },
    {
      title: '产品型号',
      dataIndex: 'n2',
      editable: false,
      renderText:()=>'CP.2012312'
    },
    {
      width: 100,
      ellipsis:true,
      title: '单位',
      dataIndex: 'packing_unit',
      hideInSearch: true,
      editable: false,
      renderText:()=>'跟'
    }, {
      width: 150,
      title: '数量',
      dataIndex: 'numbs',
      valueType:'digit',
    },
    {
      width: 150,
      title: '单价',
      valueType:'digit',
      dataIndex: 'price',
    },
    {
      width: 150,
      title: '金额',
      editable: false,
      valueType:'digit',
      dataIndex: 'price2',
    },
    {
      title: "操作",
      valueType: 'option',
      width:150,
      render: (text, record:any,_, action) => [
     
      ]
    }
  ]
  

  const aColumn:ProColumns[] = [
    {
      title:'跟进方式',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'线下'
    },
    {
      title:'跟进内容',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'线下拜访了客户'
    },
    {
      title:'跟进时间',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'2023-05-10'
    }
  ]
  const contractColumn:ProColumns[] = [
    {
      title:'合同编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'SO.202301020312001'
    },
    {
      title:'客户名称',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'人民医院'
    },
    {
      title:'合同状态',
      dataIndex: 'name9',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'执行中',
        '2':'待签约',
        '3':'完毕',
      },
      renderText:()=>'执行中'
    },
    {
      title:'开始日期',
      dataIndex: 'date1',
      width:150,
      renderText:()=>'2023-01-01'
    },
    {
      title:'结束日期',
      dataIndex: 'date2',
      width:150,
      renderText:()=>'2023-08-01'
    },
    {
      title:'合同金额',
      dataIndex: 'price',
      ellipsis:true,
      valueType:'money',
      width:150,
      renderText:()=>'100000'
    },
   
  ]

  const [dataList,setDataList] =useState<any>([
    { 
      name:'OPP.20221201001',
      name11:'上海医院装机的商机',
      name1:'上海XXXX医院',
      name2:'张XX',
    },
    { 
      name:'OPP.20221201002',
      name11:'北京医院装机的商机',
      name1:'北京XXX医院',
      name2:'张XX',
    },
    { 
      name:'OPP.20221201003',
      name11:'上海医院装机的商机',
      name1:'上海儿童医院',
      name2:'张XX',
    },
    { 
      name:'OPP.20221201004',
      name11:'南京医院装机的商机',
      name1:'南京儿童医院',
      name2:'张XX',
    }
    
  ]);
  
  const columns:ProColumns[] = [
    {
      title:'商机编码',
      dataIndex: 'name',
    },
    {
      title:'商机名称',
      dataIndex: 'name11',
    },
    {
      title:'客户名称',
      dataIndex: 'name1',
    },
    {
      title:'客户联系人',
      dataIndex: 'name2',
    },
    {
      title:'销售阶段',
      dataIndex: 'name3',
      valueType:'select',
      valueEnum:{
        '1':'已转换',
      },
      renderText:()=>'发现需求'
    },
    {
      title:'负责人',
      hideInSearch:true,
      dataIndex: 'name4',
      renderText:()=>'李四'
    },
    {
      title:'协同人',
      hideInSearch:true,
      dataIndex: 'name5',
      renderText:()=>'王五'
    },
    {
      title:'产品编码',
      dataIndex: 'name7',
      renderText:()=>'--'
    },
    {
      title:'产品规格',
      dataIndex: 'name8',
      renderText:()=>'--'
    },
    {
      title:'产品条码',
      dataIndex: 'name81',
      renderText:()=>'--'
    },
   
    {
      title: "操作",
      valueType: 'option',
      width:150,
      render: (text, record:any,_, action) => [
        <a key="b1" onClick={()=>{
         setShowTransfor(true)
        }}>转移</a>,<a key="b2">提醒</a>,<a key="b2" onClick={()=>{
          setEditableRowKeys([1,2])
          setShowDetail(true)
        }}>详情</a>
      ]
    }
  ]


  const fColumn:ProColumns[] = [
    {
      title:'报价编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'SO.202301020312001'
    },
    {
      title:'报价名称',
      dataIndex: 'name',
      ellipsis:true,
      width:200,
      renderText:()=>'人民医院第一次报价'
    },
    {
      title:'关联商机',
      dataIndex: 'name',
      ellipsis:true,
      width:200,
      renderText:()=>'SJ2001'
    },
    {
      title:'报价日期',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'2023-05-04'
    },
    {
      title:'报价状态',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'已生成合同'
    },
    {
      title: "操作",
      valueType: 'option',
      ellipsis:true,
      width:100,
      render: (text, record:any,_, action) => [
        <a key="b2">下载</a>
       ]
    },
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setEditableRowKeys([1,2])
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
      scroll={{x:1200}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: 'tab1',
              label: <span>全部</span>,
            },
            {
              key: 'tab2',
              label: <span>今日新增</span>,
            },
            {
              key: 'tab5',
              label: <span>本周新增</span>,
            },
            {
              key: 'tab3',
              label: <span>我负责的</span>,
            },
            {
              key: 'tab4',
              label: <span>我协同的</span>,
            },
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  labelCol={{style:{width:160}}} labelAlign="left" layout="horizontal"  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
           <Descriptions title="" column={3} size="small"  bordered>
                    <Descriptions.Item label="客户名称">北京XXXXX人民医院</Descriptions.Item>
                    <Descriptions.Item label="商机金额">¥46,780</Descriptions.Item>
                    <Descriptions.Item label="负责人">李四</Descriptions.Item>
                    <Descriptions.Item label="创建日期">2022-07-23</Descriptions.Item>
         </Descriptions>
         <div style={{height:10}}></div>
         <div style={{textAlign:'right'}}>
            <Button onClick={()=>{
                history.push('/sale/competition/competition');
                setShowDetail(false)
            }} type="primary">竞争对手装机</Button>
         </div>
         <div style={{height:20}}></div>
          <div style={{textAlign:'center'}}>
            <Image preview={false} src={process} width={'auto'}></Image>
          </div>
            <Tabs defaultActiveKey="1" activeKey={tabKey} onTabClick={(key)=>{
                setTabKey(key)
              }}  centered style={{backgroundColor:'#fff',padding:'0 20px 20px 20px'}}>
                
                 <TabPane tab="基本信息" key="1" >
                 <div style={{height:20}}></div>
                  <ProFormGroup>
                <ProFormText name="name11" width={'md'} label="商机名称" rules={[{ required: true}]}/>
                  <ProFormText name="name" width={'md'} label="客户名称" rules={[{ required: true}]}/>
                  <ProFormText name="name1" width={'md'} disabled label="客户联系人" rules={[{ required: true}]}/>
                  <div style={{marginTop:-22}}>
                    <Button type='primary' onClick={()=>{
                      setShowAccount(true)
                    }} >选择</Button>
                  </div>


                  <ProFormText name="name3" width={'md'} label="联系方式" rules={[{ required: true}]}/>
                </ProFormGroup>
                <ProFormGroup>
                  <ProFormDigit name="price" width={'md'} label="商机金额" rules={[{ required: true}]}/>
                  <ProFormDatePicker name="date1" width={'md'} label="预计成交日期" rules={[{ required: true}]}/>

                  <ProFormSelect name="name5" width={'md'} label="商机阶段" options={[{label:'验证客户',value:'0'},{label:'需求确认',value:'1'},{label:'方案报价',value:'2'},{label:'招投标',value:'3'},{label:'成交',value:'4'},{label:'流失',value:'5'}]}/>

                </ProFormGroup>
                <ProFormGroup>
                  <ProFormSelect name="name9" width={'md'} label="负责人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
                  <ProFormSelect name="name10" width={'md'} label="协同人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
                </ProFormGroup>
                <ProFormTextArea name="name11" width={'md'} label="备注" />

                <div style={{fontWeight:'bold',fontSize:16}}>科室关键人信息</div>

                <EditableProTable  style={{marginLeft:-20}} headerTitle={false} rowKey='pIndex' columns={contactColumn} value={contactData} search={false} toolbar={{
                    settings: []
                }} recordCreatorProps={false} onChange={data => {
                    setEditableContactRowKeys(data.map((item: any) => item.pIndex));
                    setContactData(data);
                }} toolBarRender={() => [<Button type='primary' key='primary' onClick={() => {
                    var data = [...contactData]
                    data.push({id:(contactData.length+1)+'',pIndex:contactData.length+1,name:'',dept:''})
                    setContactData(data)
                    setEditableContactRowKeys(data.map((item: any) => item.pIndex));
                }}>
                  <PlusOutlined/>添加联系人
                </Button>]} pagination={false} editable={{
                    editableKeys:editableContactKeys,
                    type: 'multiple',
                    deletePopconfirmMessage:'确定要删除吗？',
                    onChange: setEditableContactRowKeys,
                    onDelete:async(v,record)=>{

                    },
                    onValuesChange: (record, recordList) => {
                      setContactData(recordList);
                    },
                    actionRender: (row, config, defaultDoms) => {
                      
                    return [defaultDoms.delete];
                    }
                }}></EditableProTable>
              


            </TabPane>
            <TabPane tab="试用信息" key="1_1" >
                <ProFormGroup>
                <ProFormTextArea width='lg' name='31' label='机器人-研究者发起需求'/>
                <ProFormTextArea width='lg' name='32' label='腔镜-试用需求'/>
                <ProFormDatePicker width='md' name='33' label='预计试用具体月份'/>
                <ProFormSelect width='md' name='34' label='试用是否批复' options={[{label:'是',value:'1'},{label:'否',value:'2'}]}></ProFormSelect>
                <ProFormSelect width='md' name='35' label='是否有配置证' options={[{label:'是',value:'1'},{label:'否',value:'2'}]}></ProFormSelect>
              </ProFormGroup>
            </TabPane>
            <TabPane tab="产品" key="2" >
              <div style={{height:20}}></div>
              <EditableProTable headerTitle='产品列表' style={{marginLeft:-20}}  toolBarRender={()=>[<Button
                      type='primary'
                      key='new'
                      onClick={() => {
                      }}
                      >新增产品
                      </Button>]}
                    toolbar={{settings:[]}} rowKey='pIndex' columns={columns_2} value={proData} recordCreatorProps={false} onChange={data => {
            setEditableRowKeys(data.map((item: any) => item.pIndex));
            setProData(data);
          }} editable={{
            type: 'multiple',
            editableKeys,
            onValuesChange: (record, recordList) => {
              setProData(recordList);
            },
            actionRender: (row, config, defaultDoms) => {
              return [defaultDoms.delete];
            },
            onChange: setEditableRowKeys
        }} summary={()=>{
          return (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell index={1} colSpan={3}>总计:</Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>
                  3
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1}>
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>
                ￥{moneyFormat(10000)}
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1} colSpan={1}>
                </Table.Summary.Cell>
              </Table.Summary.Row>             
            </>
          );
        }}></EditableProTable>
        
            </TabPane>
            <TabPane tab="报价单" key="3" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={fColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                    setShowDetail(false)
                                    history.push('/sale/ticket');
                                  }} >新增报价单</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>
            <TabPane tab="合同" key="4" >
               <div style={{height:20}}></div>
              <ProTable
                            headerTitle=''
                            dataSource={[{id:'1'}]}
                            columns={contractColumn}
                            rowKey='id'
                            key='sale'
                            search={false}
                            toolBarRender={() => [ <Button
                              type="primary"
                              key="primary"
                              onClick={() => {
                              }} >新增合同</Button>]}
                            toolbar={{settings:[]}}
                            pagination={false}
                            />
            </TabPane>
            <TabPane tab="附件" key="5" >

              <div style={{height:20}}></div>
                  <Upload fileList={fileList}   data={{'userId':sessionStorage.getItem('userId')}} >
                      <Button  icon={<UploadOutlined />}>上传附件</Button>
                    </Upload>
            </TabPane>
            <TabPane tab="操作记录" key="6" >
            <div style={{height:20}}></div>
            <Timeline mode="alternate">
              <Timeline.Item label='04-18'>张三 新建了商机</Timeline.Item>
              <Timeline.Item label='04-22' color="green">李四 创建了报价单</Timeline.Item>
              <Timeline.Item label='05-10' color="red">王五 创建了合同</Timeline.Item>
            </Timeline>
            </TabPane>
          </Tabs>
           
          
        
      </DrawerForm>
      <ModalForm
        title="商机转移"
        width={500}
        labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"
        modalProps={{
          forceRender: true,
            destroyOnClose: true,
        }}
        visible={showTransfor}
        onVisibleChange={(val)=>{
          setShowTransfor(val)
        }}
        onFinish={async(value)=>{
          return true;
        }}
      >
        <ProForm.Group >
          <ProFormSelect  name="recv_consignee" label="变更负责人为"   width="sm"/>
          <ProFormRadio.Group  name="recv_phone" label="原负责人" options={[{label:'移出',value:'1'},{label:'转为团队成员',value:'2'}]}   width="sm"/>
        </ProForm.Group>
       
      </ModalForm>

      <DealerDialog
            mode='single'
            onCancel={() => {
              setShowAccount(false)
            }}
            onSubmit={async (value) => {
              
              setShowAccount(false)
            }}
            modalVisible={showAccount}
            values={[]}
           >
        </DealerDialog>
        <ModalForm title="新增报价单"
          width={'50%'}
          labelCol={{style:{width:120}}} labelAlign="left" 
          modalProps={{
            forceRender: true,
              destroyOnClose: true,
          }}
          visible={showTicket}
          onVisibleChange={(val)=>{
            // setShowTicket(val)
            history.push('/sale/ticket');
          }}
          onFinish={async(value)=>{
            return true;
          }}>
            <ProFormText  name="name" label="报价名称"   width="md"/>
            <ProFormSelect  name="报价阶段" label="报价阶段"  options={[{label:'报价中',value:'报价中'},{label:'招投标',value:'招投标'},{label:'合同订单',value:'合同订单'}]}  width="md"/>
            <ProFormSelect  name="状态" label="状态"  options={[{label:'已审核',value:'已审核'},{label:'未审核',value:'未审核'}]}  width="md"/>

        </ModalForm>
    </PageContainer>)
}